﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../Resource/Css/site.css" rel="stylesheet" />
    <script src="Resource/jquery-1.10.2.js"></script>
    <script>
        var data = [
    { dep: '股销', money1: '3000', money2: '3000', money3: '3000', money4: '3000', total: '9999', id: 1 },
    { dep: '投行', money1: '3000', money2: '3000', money3: '3000', money4: '3000', total: '9999', id: 2 },
    { dep: '资管', money1: '3000', money2: '3000', money3: '3000', money4: '3000', total: '9999', id: 3 },
    { dep: '固收', money1: '3000', money2: '3000', money3: '3000', money4: '3000', total: '9999', id: 4 }
        ];

    </script>
</head>
<body>
    <table id="tab" class="hovertable" style="table-layout: fixed">
    </table>
</body>
</html>
<script>
    var tableTree = function (option) {
        var that = this;
        this.data = null;

        this.property = { listUrl: "", childrenUrl: "", container: "" };

        var isExtend = false;
        this.extend = function () {
            if (isExtend == false) {
                for (var i in option) {
                    if (option.hasOwnProperty(i)) {
                        this.property[i] = option[i];
                    }
                }
            }
            isExtend = true;

            this.container = $(this.property.container);
            this.childrenURL = this.property.childrenUrl;
        }

        var isRequest = false;
        this.getData = function () {
            if (isRequest == false) {
                this.sendAjax(that.property.listUrl, { tag: "getList", ran: Math.random() }, "text", function (d) {
                    that.data = eval(d);
                });
            }
            isRequest = true;
        }

        this.sendAjax = function (url, data, datatype, callback) {
            $.ajax({
                type: "get",
                url: url,
                dataType: datatype == "" ? "text" : datatype,
                data: data,
                cache: false,
                success: callback,
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("HTTP请求错误代码:" + jqXHR.status + ",描述:" + jqXHR.statusText);
                }
            });
        }

        this.renderHeader = function () {
            var html = "<tr tag='head'>";
            html += "<td>部门类型</td>";
            html += "<td>2011</td>";
            html += "<td>2012</td>";
            html += "<td>2013</td>";
            html += "<td>2014</td>";
            html += "<td>总计</td>";
            html += "</tr>";

            this.container.append($(html));
        }

        this.renderBody = function () {
            var d = this.data;
            var html = "";
            for (var i = 0; i < d.length; i++) {
                html += "<tr tag='body' id='" + d[i].id + "'>";
                html += "<td><input type='checkbox' /><img id='" + d[i].id + "' tag='img' src='icon/down.png' />" + d[i].dep + "</td>";
                html += "<td>" + d[i].money1 + "</td>";
                html += "<td>" + d[i].money2 + "</td>";
                html += "<td>" + d[i].money3 + "</td>";
                html += "<td>" + d[i].money4 + "</td>";
                html += "<td>" + d[i].total + "</td>";
                html += "</tr>";
                html += "<tr show='false' tag='children'></tr>";
            }
            this.container.append($(html));
        }

        this.getChildrenData = function (obj, url, parm) {
            var data = $(obj).data("data");
            if (data) {
                var tr = this.getChildrenHtml(data);
                this.appendNodeTotable(obj, tr);
            }
            else {
                this.sendAjax(url, parm, "text", function (d) {
                    data = eval(d);
                    $(obj).data("data", data);
                    var tr = that.getChildrenHtml(data);
                    that.appendNodeTotable(obj, tr);
                });
            }
        }

        this.appendNodeTotable = function (obj, tr) {
            var next = $(obj).parent().parent().next();
            next.append($(tr));
        }

        this.getChildrenHtml = function (data) {
            var html = "";
            var paddingr = 0;
            html += "<td style='padding:0px;' colspan='6'>";
            html += "<table cellspacing='0' class='hovertable' style='table-layout:fixed;border:0px;'>";
            if (right == 8) {
                paddingr = 67;;
            }
            else {
                paddingr = right - 23;
            }

            for (var i = 0; i < data.length; i++) {
                html += "<tr>";
                if (data[i].hasChildren) {
                    html += "<td style='border:0px;text-align: right;padding-right:" + paddingr + "px;'><input type='checkbox' /><img id='" + data[i].id + "' tag='img' src='icon/down.png' />" + data[i].dep + "</td>";
                } else {
                    html += "<td style='border:0px;text-align: right;padding-right:" + paddingr + "px;'><input type='checkbox' />" + data[i].dep + "</td>";
                }
                html += "<td>" + data[i].money1 + "</td>";
                html += "<td>" + data[i].money2 + "</td>";
                html += "<td>" + data[i].money3 + "</td>";
                html += "<td>" + data[i].money4 + "</td>";
                html += "<td>" + data[i].total + "</td>";
                html += "</tr>";
                if (data[i].hasChildren) {
                    html += "<tr></tr>";
                }
            }
            html += "</table>";
            html += "</td>";

            return html;
        }

        var right = 0;
        this.regEvent = function () {
            $(this.container).get(0).onclick = function (e) {
                var e = event || window.event;
                var node = e.srcElement || e.target;
                right = parseInt($(node).parent().css("padding-right"));
                if (node.tagName.toLowerCase() == "img" && node.getAttribute("tag") == "img") {
                    if ($(node).attr("src") == "icon/down.png") {
                        $(node).attr("src", "icon/up.png");
                    }
                    else {
                        $(node).attr("src", "icon/down.png");
                    }
                    var ptr = $(node).parent().parent().next();
                    if ($(node).data("data")) {
                        if (ptr.attr("show") == "true") {
                            ptr.find("td").show();
                            ptr.attr("show", "false");
                        }
                        else {
                            ptr.find("td").hide();
                            ptr.attr("show", "true");
                        }
                    }
                    else {
                        that.getChildrenData(node, that.childrenURL, { id: node.getAttribute("id"), tag: "childrendata", ran: Math.random() });
                    }
                }
                if (node.tagName.toLowerCase() == "input" && node.type.toLowerCase() == "checkbox") {
                    if ($(node).next().length != 0 && $(node).next().get(0).tagName.toLowerCase() == "img") {
                        var tr = $(node).parent().parent().next();
                        tr.find("input[type=checkbox]").each(function () {
                            this.checked = node.checked;
                        });
                    }
                    else {
                        alert("已经到了根节点");
                    }
                }
            }
        }

        this.init = function () {
            that.extend();
            that.getData();

            console.log(1);

            if (that.data != null) {
                that.renderHeader();
                that.renderBody();
                that.regEvent();

                return;
            }
            var arg = arguments;
            window.requestAnimationFrame(arg.callee, arg);
        }
    }

    var c = new tableTree({
        listUrl: "SelectAjax.aspx",
        childrenUrl: "SelectAjax.aspx",
        container: $("#tab")
    });
    c.init();
</script>
